<h2>Add an element : step 2 of 2</h2>

<img width="250px" id="preview-add-meta" src="<?php echo $this->img; ?>" alt="@" />
<div id="element_add_block">
<label for="auto_fill" id="autoFill_label">IMDB:</label><br />
    <input type="search" name="auto_fill" value="" id="auto_fill" />
    <input type="button" value="search" id="search_submit" />
    <br />
<select name="choices[]" id="choices" multiple="multiple">    
</select>

<?php echo $this->form ?>
</div>
<div class="clear">&nbsp;</div>
<script type="text/javascript" charset="utf-8">
    function fixImgSize(img) {
        var src = img.attr('src');
        var temp = new Image();
        console.log(temp.src)
        temp.src = src;
        temp.onload = function(){
            if (temp.width < img.width()) {
                img.attr('width', temp.width);
            }
        };
        
    }

    var searchHandling = function (data){
            var list = $('#choices');
            list.show();
            list.children().remove()
            for(var id in data){
                list.append('<option value="'+id+'">'+data[id]+'</option>');
            }
        };
    var infoHandling = function (data){
            $('#name').val(data.name);
            $('#author').val(data.author);
            $('#description').val(data.desc);
            $('#src').val(data.img);
            $('#url').val(data.url);
            $('#preview-add-meta').attr('src', (data.img));
            fixImgSize($('#preview-add-meta'));
        };

    $("#choices").change(function(){
        var id = $('#choices option:selected').last().val();
        $.get("/element/imdbinfo/", {id: id}, infoHandling);
    })
    
    $("#search_submit").click(function(){
        var data = {search: $('#auto_fill').attr('value')};
        $.get("/element/imdbsearch/", data,searchHandling);
    });
    
    $(document).ready(function() {
        fixImgSize($('#preview-add-meta'));
    });
</script>
